<template>
	<view class="content">
		<scroll-view class="listBox" scroll-y="true" @scroll="scroll" @scrolltolower="getMore()">
			<view class="listBoxInner">
				<view class="listItem" v-for="(item,index) in goods" :key="item.id"
					@click="$navto.navto('/course/training_camp/training_camp',{id:item.id})">
					<image :src="item.min_cover" class="itemCover" />
					<text class="itemName">{{item.name}}</text>
					<view class="priceBox">
						<text class="itemPrice">￥{{item.sell_price}}</text>
						<text class="itemPrice1-2" v-if="item.lineation_price>0">￥{{item.lineation_price}}</text>
					</view>
					<view class="buy">
						购买
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	export default {
		data() {
			return {
				bgColor: 'transparent',
				baseUrl: `https://cdn.zkjialan.com/img/product/`,
				content: '',
				isAni: 0,
				active: 1,
				category_id: 2,
				goods: '',
				page_no: 1,
				goodType: 1
			}
		},
		onLoad(options) {
			this.page_no = 1;
			this.getGoods();
		},
		methods: {
			// 获取商品列表
			getMore() {
				this.page_no++;
				this.$request.get(
					`shopapi/Goods/lists?goods_type=2&page_no=${this.page_no}&page_size=10`
				).then(res => {
					this.goods.push(...res.data.data.lists);
				})
			},
			getGoods() {
				this.$request.get(
					`shopapi/Goods/lists?goods_type=2&page_no=${this.page_no}&page_size=10`
				).then(res => {
					console.log(res.data);
					this.goods = res.data.data.lists;
				})
			},
			change(num) {
				console.log(num);
				this.active = num;
				this.category_id = num;
				this.page_no = 1;
				this.getGoods();
			},
			scroll(e) {
				let distance = e.detail.scrollTop;
				//改变按钮大小
				if (distance >= 100) {
					console.log("大于" + e.detail.scrollTop);
					this.isAni = 1;
				} else {
					console.log("小于" + e.detail.scrollTop);
					this.isAni = 0;
				}
			},
		},
	}
</script>

<style lang="scss" scoped>

	.listBox {
		position: relative;
		width: 670rpx;
		height: 100%;
		margin-top: 20rpx;
		margin-left: 40rpx;
		padding-top: 37rpx;
		overflow-y: scroll;

		// padding-bottom: 200rpx;
		.listBoxInner {
			width: 100%;
			// height: 65vh;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			overflow-y: scroll;

			.listItem {
				position: relative;
				width: 325rpx;
				height: 350rpx;
				border-radius: 15rpx;
				margin-bottom: 40rpx;
				background-color: #fff;

				.buy{
					position: absolute;
					width: 100rpx;
					height: 40rpx;
					top: 285rpx;
					right: 10rpx;
					font-size: 23rpx;
					font-family: 'ar';
					text-align: center;
					line-height: 40rpx;
					border-radius: 20rpx;
					background-color: #f08229;
					color: #fff;
				}

				.priceBox {
					position: absolute;
					display: flex;
					top: 288rpx;
					left: 20rpx;
					width: 300rpx;
					font-size: 26rpx;
					font-family: 'ar';
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					align-items: center;
				
					.itemPrice {
						font-size: 23rpx;
						font-family: 'ar';
						color: #f08229;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-weight: 700;
					}
				
					.itemPrice1-2 {
						margin-left: 10rpx;
						font-size: 23rpx;
						color: #999999;
						text-decoration: line-through;
					}
				}

				.itemCover {
					width: 100%;
					height: 216rpx;
					border-radius: 15rpx 15rpx 0 0;
				}

				.itemName {
					position: absolute;
					width: 300rpx;
					font-size: 25rpx;
					font-family: 'am';
					color: #141414;
					top: 246rpx;
					left: 25rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}

	/deep/ .u-navbar-left {
		display: none;
	}

	.logo {
		width: 320rpx;
		height: 52rpx;
		// margin: 0 auto;
		margin-left: 40rpx;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		background-color: #f8f5f0;
		overflow-y: scroll;
	}

	page {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
	}
</style>